<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        // 这个构造函数
        //    创建了所需要的标签，且添加了相关的样式
        //    绑定点击事件
        //    初始化(确定弹窗的类型)


        // 实际上调用的时候， 如果每次都实例化就会不断创建标签 
        // 没有必要每次都实例化

        // 解决方案：在第一次实例化以后   标签就已经创建好了
        //    以后不再实例化
        //    只调用init方法  通过init传参


        // 单例注意：
        //    构造函数本身没有参数
        //    参数时通过每一次实例化都需要调用的那个函数来携带



        // 原本的实现
        // class Demo {
        //     constructor(str) {
        //         this.str = str ;
        //         this.init()
        //     }
        //     init() {
        //         console.log(this.str);
        //     }
        // }

        class Demo {
            constructor() {
                // this.init()
            }
            init(str) {
                console.log(str);
            }
        }

        let d = null;

        function single() {
            if (!d) {
                d = new Demo()
            }
            return d
        }




        const d1 = single();
        d1.init('hello')

        const d2 = single();
        d2.init('hi')


    </script>

</body>

</html>